[SpringMVC]基于RESTful页面数据交互案例 | 您所在的位置:网站首页 › springmvc restful接口开发 › [SpringMVC]基于RESTful页面数据交互案例 |
@[TOC] 需求分析需求一:图片列表查询,从后台返回数据,将数据展示在页面上 我们的基本步骤: 搭建项目导入jar包 编写Controller类,提供两个方法,一个用来做列表查询,一个用来做新增 在方法上使用RESTful进行路径设置 完成请求、参数的接收和结果的响应 使用PostMan进行测试 将前端页面拷贝到项目中 页面发送ajax请求 完成页面数据的展示 环境准备 创建一个Web的Maven项目pom.xml添加Spring依赖 4.0.0 com.nefu springmvc_try 1.0-SNAPSHOT war javax.servlet javax.servlet-api 3.1.0 provided org.springframework spring-webmvc 5.2.10.RELEASE com.fasterxml.jackson.core jackson-databind 2.9.0 org.apache.tomcat.maven tomcat7-maven-plugin 2.1 80 /创建对应的配置类 public class ServletContainersInitConfig extends AbstractAnnotationConfigDispatcherServletInitializer { protected Class[] getRootConfigClasses() { return new Class[0]; } protected Class[] getServletConfigClasses() { return new Class[]{SpringMvcConfig.class}; } protected String[] getServletMappings() { return new String[]{"/"}; } //乱码处理 @Override protected Filter[] getServletFilters() { CharacterEncodingFilter filter = new CharacterEncodingFilter(); filter.setEncoding("UTF-8"); return new Filter[]{filter}; } } @Configuration @ComponentScan("com.nefu.controller") //开启json数据类型自动转换 @EnableWebMvc public class SpringMvcConfig { }编写模型类Book public class Book { private Integer id; private String type; private String name; private String description; //setter...getter...toString略 }编写BookController @Controller public class BookController { }项目结构: 测试新增 { "type":"计算机丛书", "name":"SpringMVC终极开发", "description":"这是一本好书" }测试查询 将资料\功能页面下的所有内容拷贝到项目的webapp目录下 打开浏览器输入http://localhost/pages/books.html (1)出现错误的原因? SpringMVC拦截了静态资源,根据/pages/books.html去controller找对应的方法,找不到所以会报404的错误。 (2)SpringMVC为什么会拦截静态资源呢? (3)解决方案? ==SpringMVC需要将静态资源进行放行。== @Configuration public class SpringMvcSupport extends WebMvcConfigurationSupport { //设置静态资源访问过滤,当前类需要设置为配置类,并被扫描加载 @Override protected void addResourceHandlers(ResourceHandlerRegistry registry) { //当访问/pages/????时候,从/pages目录下查找内容 registry.addResourceHandler("/pages/**").addResourceLocations("/pages/"); registry.addResourceHandler("/js/**").addResourceLocations("/js/"); registry.addResourceHandler("/css/**").addResourceLocations("/css/"); registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/"); } } 该配置类是在config目录下,SpringMVC扫描的是controller包,所以该配置类还未生效,要想生效需要将SpringMvcConfig配置类进行修改 @Configuration @ComponentScan({"com.nefu.controller","com.nefu.config"}) @EnableWebMvc public class SpringMvcConfig { } 或者 @Configuration @ComponentScan("com.nefu") @EnableWebMvc public class SpringMvcConfig { }==注意:==此处有人可能会想着把SpringMvcSupport配置类上的@Configuration注解给去掉,然后在SpringMvcConfig文件中使用@Import进行引入这样是不行的!因为这样的话实际上是让SpringMvcConfig引入SpringMvcSupport配置类中所有的bean,但是你SpringMvcSupport配置类中就重写了一个方法,压根就没有bean。所以不能使用。例如像下面这种才可以使用: @Configuration public class ImportedConfig { @Bean public ImportedBean getImportedBean(){ return new ImportedBean(); } } 具体的@Import注解使用规则,可以参考下面的链接: 步骤3:修改books.html页面 SpringMVC案例 图书管理 查询 新建 编辑 删除 取消 确定 var vue = new Vue({ el: '#app', data:{ dataList: [],//当前页要展示的分页列表数据 formData: {},//表单数据 dialogFormVisible: false,//增加表单是否可见 dialogFormVisible4Edit:false,//编辑表单是否可见 pagination: {},//分页模型数据,暂时弃用 }, //钩子函数,VUE对象初始化完成后自动执行 created() { this.getAll(); }, methods: { // 重置表单 resetForm() { //清空输入框 this.formData = {}; }, // 弹出添加窗口 openSave() { this.dialogFormVisible = true; this.resetForm(); }, //添加 saveBook () { axios.post("/books",this.formData).then((res)=>{ }); }, //主页列表查询 getAll() { axios.get("/books").then((res)=>{ this.dataList = res.data; }); }, } }) |
CopyRight 2018-2019 实验室设备网 版权所有 |